<template>
  <div class="common-layout"  style="background-color: #F1FAEE;width: 100%;height: 100%" >
    <el-container >

        <el-aside width="15%" style="text-align: center;" >
          <el-menu class="menu" mode="" style="width: 100%;height:100%;color: #5F9EA0;text-align: center" >
                        <el-menu-item  index="1" ><router-link class="router-link" to="/main" ref="ref1" >Xfee1.5</router-link></el-menu-item>
            <el-menu-item index="2" ><router-link class="router-link" >Xfee助手3.0
                                     </router-link></el-menu-item>
                        <el-menu-item index="3" ><router-link class="router-link" to="/article">发布文章
                        </router-link></el-menu-item>
                        <el-menu-item index="4" ><router-link class="router-link" to="/list">教程文章
                        </router-link></el-menu-item>

                        <el-menu-item index="5" ><router-link class="router-link" to="/main">聊天大厅
                        </router-link></el-menu-item>
                        <el-menu-item index="6" ref="ref3"><router-link class="router-link" to="/user" ref="ref1" >个人设置
                        </router-link></el-menu-item>
                        <el-menu-item index="7"><router-link class="router-link" to="/login" ref="ref2">登录/注册</router-link></el-menu-item>
                        <el-menu-item><span type="primary"  @click="open = true">新手引导</span></el-menu-item>
                        <el-menu-item index="8" @click="exit" >退出登录</el-menu-item>
                      </el-menu>
        </el-aside>
        <el-main  style="background-color:#154360;height: 100%;margin-top: 0">
          <router-view style="height: 100%"></router-view>
        </el-main>
    </el-container>
  </div>
  <el-tour v-model="open">
    <el-tour-step :target="ref1?.$el" title="首页">
      <img
          style="width: 50px"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          alt="tour.png"
      />
      <div>欢迎您点击首页查看更多内容</div>
    </el-tour-step>
    <el-tour-step
        :target="ref2?.$el"
        title="登录与注册"
        description="客官，点击此处您可以进行登录注册哦"
    />
    <el-tour-step
        :target="ref3?.$el"
        title="设置"
        description="客官您可以在此处设置您的个人资料"
    />
  </el-tour>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue'
const open = ref(false)
import router from "@/utils/router.js";
import {ButtonInstance} from "element-plus";
import axios from "axios";
const ref1 = ref<ButtonInstance>()
const ref2 = ref<ButtonInstance>()
const ref3 = ref<ButtonInstance>()
const exit=()=>{
  localStorage.clear()
  router.push('/login')
}
const imgurl=ref("");
const userinfo=()=>{
  axios.get("/user/userInfo").then(result=>{
   return  imgurl.value=result.data.data.userPic
  }).catch(err=>{
    return err
  })
}
onMounted(()=>{
  userinfo()

})

const ripples=ref([])
</script>

<style>
* {
  font-family: "华文琥珀";
  margin: 0;
  padding: 0;
    text-decoration: none; /* 去除默认的下划线 */
    outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
    color: #000;	/* 去除默认的颜色和点击后变化的颜色 */

}
//动画
.router-link{
  width: 100%;
}
h3{
  margin-top: 8%;
}
.navbar {
  display: flex;
  justify-content: space-between;

}

.title {
  display: inline-block;
}

.menu {
  display: inline-block;
background-color: #4caf50 ;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #c0c3ef;
}

::-webkit-scrollbar-thumb {
  background: #f1e5e5;
}

::-webkit-scrollbar-thumb:hover {
  background: #39aad9;
}
</style>
